<template>
  <div class="logo">
    <img
      @click="click"
      v-lazy="src"
      alt="avatar, logo"
      :width="width"
      :height="height"
    />
  </div>
</template>

<script lang="ts">
import { Component } from 'nuxt-property-decorator'
import { BaseVue } from '@/plugins/base-vue'
@Component({
  props: {
    width: {
      type: [Number, String],
      default: 45,
    },
    height: {
      type: [Number, String],
      default: 45,
    },
    src: {
      type: [String, Object],
      default: require('~/assets/images/JO.svg'),
    },
  },
})
export default class Logo extends BaseVue {
  click() {
    this.$router.push({
      path: '/earth/chat',
    })
    this.$emit('on-logo-click')
  }
}
</script>

<style lang="scss" scoped>
.logo {
  width: 90px;
  height: 92px;
  box-sizing: border-box;
  padding: 22px;
  border-right: 1px solid rgba(57, 54, 54, 1);
  cursor: pointer;
}
</style>
